<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <meta name="description" content="Developed By M Abdur Rokib Promy"></meta>
    <meta name="author" content="cosmic"></meta>
    <meta name="keywords" content="Bootstrap 3, Template, Theme, Responsive, Corporate, Business"></meta>
    <link rel="shortcut icon" href="/img/icon.png"></link>

    <title>
      一颗行走的柿子
    </title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/theme.css" rel="stylesheet"/>
    <link href="/css/bootstrap-reset.css" rel="stylesheet"/>
    <!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->

    <!--external css-->
    <link href="/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/flexslider.css"/>
    <link href="/assets/bxslider/jquery.bxslider.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/animate.css"/>
    <link rel="stylesheet" href="/assets/owlcarousel/owl.carousel.css"/>
    <link rel="stylesheet" href="/assets/owlcarousel/owl.theme.css"/>

    <link href="/css/superfish.css" rel="stylesheet" media="screen"/>
    <link href='/css/superfish1.css' rel='stylesheet' type='text/css'/>
    <!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> -->


    <!-- Custom styles for this template -->
    <link rel="stylesheet" type="text/css" href="/css/component.css"/>
    <link href="/css/style.css" rel="stylesheet"/>
    <link href="/css/style-responsive.css" rel="stylesheet" />

    <link rel="stylesheet" type="text/css" href="/css/parallax-slider/parallax-slider.css" />
    <script src="/behind/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/js/parallax-slider/modernizr.custom.28468.js" />
	</head>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js">
    </script>
    <script src="js/respond.min.js">
    </script>
    <![endif]-->
    <script type="text/javascript" src="/js/jquery.js"></script>
	<script type="text/javascript" src="/js/superslide.2.1.js"></script>
  

  <body>
  
  	<style type="text/css">		
	*{margin:0;padding:0;list-style:none;}
	body{background:#fff;font:normal 12px/22px 宋体;width:100%;}
	img{border:0;}
	a{text-decoration:none;color:#333;}
	a:hover{color:#1974A1;}
	/* fullSlide */
	.fullSlide{width:100%;position:relative;height:410px;background:#000;}
	.fullSlide .bd{margin:0 auto;position:relative;z-index:0;overflow:hidden;}
	.fullSlide .bd ul{width:100% !important;}
	.fullSlide .bd li{width:100% !important;height:410px;overflow:hidden;text-align:center;}
	.fullSlide .bd li a{display:block;height:410px;}
	.fullSlide .hd{width:100%;position:absolute;z-index:1;bottom:0;left:0;height:30px;line-height:30px;}
	.fullSlide .hd ul{text-align:center;}
	.fullSlide .hd ul li{cursor:pointer;display:inline-block;*display:inline;zoom:1;width:42px;height:11px;margin:1px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px;}
	.fullSlide .hd ul .on{background:#f00;}
	.fullSlide .prev,.fullSlide .next{display:block;position:absolute;z-index:1;top:50%;margin-top:-30px;left:15%;z-index:1;width:40px;height:60px;background:url(/img/slider-arrow.png) -126px -137px #000 no-repeat;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;display:none;}
	.fullSlide .next{left:auto;right:15%;background-position:-6px -137px;}
	</style>
  
  
  
  	
  
  
  
  
  
  
  
  
  
  
    <!--header start-->
  	<header th:include="/common/header" class="head-section">
  	</header>
    <!--header end-->

    <!-- Sequence Modern Slider 
    <div id="da-slider" class="da-slider">
    	<div class="da-slide" th:each="article:${indexArticleList}">
    
    
            
            <div class="container">
              <div class="row">
                <div class="col-md-12">
              <h2>
                <i th:text="${article.title}">啊啊啊啊啊啊啊啊1啊啊啊啊啊啊</i>
                <br/>
                <i>啊啊啊啊啊啊啊啊</i>
                <br/>
                <i>111111111111</i>
              </h2>
              <p>
                <i>11111111111</i>
                <br/>
                <i>1111111111</i>
              </p>
              <a href="#" class="btn btn-info btn-lg da-link">
                Read more
              </a>
              <div class="da-img">
                <img src="/img/parallax-slider/images/asd.png" alt="image01" />
              </div>
            </div>
          </div>
        </div>
      </div>

  



      <nav class="da-arrows">
        <span class="da-arrows-prev">
        </span>
        <span class="da-arrows-next">
        </span>
      </nav>
    </div>
-->
      
      <!--
				<ul>
				<li _src="url(/img/banner/aa.jpg)" style="background:#E2025E center 0 no-repeat;"><a href="#"></a></li>
				<li _src="url(/img/banner/bb.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a href="#"></a></li>
				<li _src="url(/img/banner/cc.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a href="#"></a></li>
				
				</ul>
			 -->
      <div class="fullSlide">
		<div class="bd">
			<ul >
				<li  th:each="article:${indexArticleList}" th:attr="_src='url('+${article.coverFileSrc}+')',Srcid=${article.id}" style="background:#E2025E center 0 no-repeat;"><a href="#"></a></li>
			</ul>
		</div>
		<div class="hd"><ul></ul></div>
		<span class="prev"></span>
		<span class="next"></span>
	</div>
      
      
      
      
      
      
      
    <div class="container">
      <div class="row mar-b-50">
        <div class="col-md-12">
          <div class="text-center feature-head wow fadeInDown">
            <h1 class="">
              		你的独家记忆
            </h1>

          </div>


          <div class="feature-box">
            <div class="col-md-4 col-sm-4 text-center wow fadeInUp">
              <div class="feature-box-heading">
                <em>
                <img src="/img/1.png" alt="" width="100" height="100"/>
                </em>
                <h4>
                  <b>HELLO ，感谢你来到柿子为你量身定制的独家记忆活动！</b>
                </h4>
              </div>
              <p class="text-center">
			                现任留学生？ OR  旅行达人？
			已然成功登陆的海归？ OR  相机不离手的摄影狂人？
			无论你是哪一种，这些活动都12万分欢迎你哟！
              </p>
            </div>
            <div class="col-md-4 col-sm-4 text-center wow fadeInUp">
              <div class="feature-box-heading">
                <em>
                  <img src="/img/2.png" alt="" width="100" height="100"/>
                </em>
                <h4>
                  <b>NO.1 话题留言活动~~~</b>
                </h4>
              </div>
              <p class="text-center">
			                话题一：一句话形容你对留学国家的印象
			  </p>
			   <p class="text-center">
			                话题二：留学生活的感受（字数不限，吐槽也欢迎哟！）
			  </p>
			   <p class="text-center">
			                话题三：你见过的，属于这个国度的，最美风景，请附上地名和图片～最好是自己拍的哟～
			  </p>
			  <span class= "text-center">
				&nbsp;&nbsp;以上三个话题随你喜好，想参与几个都OK，烦请在留言中写下国家／城市名，学校名称，姓名／某同学／笔名都可以！（例如：话题一 俄罗斯真是冷的我呵呵哒~ 俄罗斯莫斯科友大  柿子）
				PS:每一句留言都会做成专题集锦在公众号上推广，柿子先提前感谢大家的参与和支持啦！
              </span>
            </div>
            <div class="col-md-4 col-sm-4 text-center wow fadeInUp">
              <div class="feature-box-heading">
                <em>
                  <img src="/img/3.png" alt="" width="100" height="100"/>
                </em>
                <h4>
                  <b>NO.2 投稿活动~~~</b>
                </h4>
              </div>
              <p class="text-center">
                	投稿一：如果你想详细记录下留学生活的经历或者感触，果断砸稿过来～（公众号之前有推过在不同国家留学的故事，期待下一个就是你）
              </p>
              <p class="text-center">
                	投稿二：也许你走过很多城市，看过很多风景，希望你愿意把它分享给还未曾亲眼见过的我们，无论几句话还是几张照片，亦或是一些旅行游记，都是独一无二的记忆！（国内外都欢迎哟！）
              </p>
            </div>
          </div>

          <!--feature end-->
        </div>
      </div>
    </div>


    <!--property start
    <div class="property gray-bg">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-sm-6 text-center wow fadeInLeft">
            <img src="/img/tab1.png" alt=""/>
          </div>
          <div class="col-lg-6 col-sm-6 wow fadeInRight">
            <h1>
              Mobile ready
            </h1>
            <hr>
            <p>
              <i class="fa fa-check fa-lg pr-10">
              </i>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener. natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener. natus error sit voluptatem accusantiu.
            </p>
            <p>
              <i class="fa fa-check fa-lg pr-10">
              </i>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener. natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener. natus error sit voluptatem accusantiu.
            </p>
            <p>
              <i class="fa fa-check fa-lg pr-10">
              </i>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener.
            </p>
            </hr>
            <a href="javascript:;" class="btn btn-purchase">
              Purchase now
            </a>
          </div>
        </div>
      </div>
    </div>
    property end-->
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>

    <div class="container">

      <div class="row mar-b-60">
        <div class="col-lg-6">
          <!--tab start-->
          <section class="tab wow fadeInLeft">
            <header class="panel-heading tab-bg-dark-navy-blue">
              <ul class="nav nav-tabs nav-justified ">
                <li class="active">
                  <a data-toggle="tab" href="#news">
                    		最新发布
                  </a>
                </li>
                <li>
                  <a data-toggle="tab" href="#events">
                    	最新评论
                  </a>
                </li>
                <li class="">
                  <a data-toggle="tab" href="#notice-board">
                    	想对你们说的话
                  </a>
                </li>
              </ul>
            </header>
            <div class="panel-body">
              <div class="tab-content tasi-tab">
                <div id="news" class="tab-pane fade in active">
                  <article class="media" th:each="model:${newArticleModelList}">
                    <a class="pull-left thumb p-thumb">
                      <img src="/img/product1.jpg"  th:src="${model.coverFileSrcS}" alt=""/>
                    </a>
                    <div class="media-body b-btm">
                      <a href="#" class=" p-head" th:text="${model.title}">
                      </a>
                      <p th:text="${model.description}">
                      </p>
                    </div>
                  </article>
                
                </div>
                <div id="events" class="tab-pane fade">
                  <article class="media">
                    <a class="pull-left thumb p-thumb">
                      <!--image goes here-->
                    </a>
                    <div class="media-body b-btm">
                      <a href="#" class="cmt-head">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      </a>
                      <p>
                        <i class="fa fa-time">
                        </i>
                        1 hours ago
                      </p>
                    </div>
                  </article>
                  <article class="media">
                    <a class="pull-left thumb p-thumb">
                      <!--image goes here-->
                    </a>
                    <div class="media-body b-btm">
                      <a href="#" class="cmt-head">
                        Nulla vel metus scelerisque ante sollicitudin commodo
                      </a>
                      <p>

                        <i class="fa fa-time">
                        </i>
                        23 mins ago
                      </p>
                    </div>
                  </article>
                  <article class="media">
                    <a class="pull-left thumb p-thumb">
                      <!--image goes here-->
                    </a>
                    <div class="media-body b-btm">
                      <a href="#" class="cmt-head">
                        Donec lacinia congue felis in faucibus.
                      </a>
                      <p>

                        <i class="fa fa-time">
                        </i>
                        15 mins ago
                      </p>
                    </div>
                  </article>
                </div>
                <div id="notice-board" class="tab-pane fade">
                  <p>
                    Hello，我是柿子，期待你好久啦~~~感谢你愿意加入我们！！！
						如果你有留学故事想和大家分享，请毫不犹豫地联系柿子；
						如果你也是驴友，有兴趣做旅行推荐，请毫不犹豫地联系柿子；
						如果你有读书感悟或者美文佳作想发表，请毫不犹豫地联系柿子；
						如果你有好的想法和建议，也请你毫不犹豫地联系柿子。<br/>
						柿子一直在等你！！！
                  </p>
                  <p>
			                    联系方式：邮箱：yxylalisa@icloud.com<br/>
			                    微信号：yueyue_moon_<br/>
			                    微博：一颗行走的柿子
                  </p>
                </div>
              </div>
            </div>
          </section>
          <!--tab end-->
        </div>
        <div class="col-lg-6">
          <!--testimonial start-->
          <div class="about-testimonial boxed-style about-flexslider ">
            <section class="slider wow fadeInRight">
              <div class="flexslider">
                <ul class="slides about-flex-slides">
                  <li th:each="author:${authorList}">
                    <div class="about-testimonial-image ">
                      <img  th:src="${author.fileNameSrc}" alt=""/>
                    </div>
                    <a class="about-testimonial-author" href="javaScript:void(0);" th:text="${author.name}">
                    </a>
                    <span class="about-testimonial-company" th:text="${author.realName}">
                    </span>
                    <div class="about-testimonial-content">
                      <p class="about-testimonial-quote" th:text="${author.introduction}">
                      </p>
                    </div>
                  </li>
                  
                </ul>
              </div>
            </section>
          </div>
          <!--testimonial end-->
        </div>
        </div>
      </div>


      <!--recent work start-->
    
      <!--recent work end-->



  
    <!-- service end -->
  
      <!-- END CLIENTS -->




    <!--container end-->

     <!--footer start-->
    <footer class="footer" th:include="/common/footer"></footer>
    <!-- footer end -->
    <!--small footer start -->
    <footer class="footer-small" th:include="/common/smallfooter"></footer>
    <!--small footer end-->

    <!-- js placed at the end of the document so the pages load faster
<script src="js/jquery.js">
</script>
-->
	<script type="text/javascript">
	$(".fullSlide").hover(function(){
	    $(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
	},
	function(){
	    $(this).find(".prev,.next").fadeOut()
	});
	$(".fullSlide").slide({
	    titCell: ".hd ul",
	    mainCell: ".bd ul",
	    effect: "fold",
	    autoPlay: true,
	    autoPage: true,
	    trigger: "click",
	    startFun: function(i) {
	        var curLi = jQuery(".fullSlide .bd li").eq(i);
	        if ( !! curLi.attr("_src")) {
	            curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
	        }
	    }
	});
	</script>



    <script src="/js/jquery-1.8.3.min.js">
    </script>
    <script src="/js/bootstrap.min.js">
    </script>
    <script type="text/javascript" src="/js/hover-dropdown.js">
    </script>
    <script  src="/js/jquery.flexslider.js">
    </script>
    <script type="text/javascript" src="/assets/bxslider/jquery.bxslider.js">
    </script>

    <script type="text/javascript" src="/js/jquery.parallax-1.1.3.js">
    </script>
    <script src="/js/wow.min.js">
    </script>
    <script src="/assets/owlcarousel/owl.carousel.js">
    </script>

    <script src="/js/jquery.easing.min.js">
    </script>
    <script src="/js/link-hover.js">
    </script>
    <script src="/js/superfish.js">
    </script>
    <script type="text/javascript" src="/js/parallax-slider/jquery.cslider.js">
    </script>
    <script type="text/javascript">
      $(function() {

        $('#da-slider').cslider({
          autoplay    : true,
          bgincrement : 100
        });

      });
    </script>



    <!--common script for all pages-->
    <script src="/js/common-scripts.js">
    </script>

    <script type="text/javascript">
      jQuery(document).ready(function() {
        $('.bxslider1').bxSlider({
          minSlides: 5,
          maxSlides: 6,
          slideWidth: 360,
          slideMargin: 2,
          moveSlides: 1,
          responsive: true,
          nextSelector: '#slider-next',
          prevSelector: '#slider-prev',
          nextText: 'Onward →',
          prevText: '← Go back'
        });
        
        function goModule(id){
        
        	alert(id);
        
        
        }
        
        
        
        
        

      });


    </script>


    <script>
      $('a.info').tooltip();

      $(window).load(function() {
        $('.flexslider').flexslider({
          animation: "slide",
          start: function(slider) {
            $('body').removeClass('loading');
          }
        });
      });

      $(document).ready(function() {

        $("#owl-demo").owlCarousel({

          items : 4

        });

      });

      jQuery(document).ready(function(){
        jQuery('ul.superfish').superfish();
      });

      new WOW().init();


    </script>
  </body>
</html>